<html>
<head>
	<title>Gestion de Mesas - Crear Pedido</title>
  <style type="text/css">
	body {	background-color: gray; padding: 20px; font-family: Segoe UI; }
	h1, h2 { font-weight: lighter; }
	h1 { border-bottom: 1px solid black; }
	.button	{ margin-top: 5px;	clear: both; width: 150px; margin-top: 5px;}
	#crear-pedido { width: 50%; border: 1px solid black; margin-left: 25%; background-color: white; padding: 20px; }
	.text-box { width: 150px; }
	select { width: 150px; }
	.center { margin-left: 30%; }
	.left { width: 50%; float: left; }
	.right { width: 50%; float: right; }
	table { border: 1px solid black; }
	td { border: 1px solid black; padding: 5px; }
	.separator { border-bottom: 1px solid black; margin-bottom: 10px; height: 10px; clear: both;}
  </style>
</head>
<body>
	<div id="crear-pedido">
		<h1>Crear Pedido</h1>
		<h2>Elija una mesa</h2>
		
		<select>
		  <option value="1">1</option>
		  <option value="2">2</option>
		  <option value="3">3</option>
		  <option value="4">Etc..</option>
		</select>
		
		<div class="separator"></div>
		
		<div class="left">
			<h2>Elija un plato</h2>
			<select>
			  <option value="1">Sorrentinos</option>
			  <option value="2">Milanesas</option>
			  <option value="3">Bife de chorizo</option>
			  <option value="4">Etc..</option>
			</select>
			
			<h2>Cantidad</h2>
			<div class="left">
				<input type="text" class="text-box">
			</div>
			
			<div>
				<input type="button" class="button" value="Agregar" >
			</div>
		</div>
		
		<div class="right">
			<h2>Items agregados</h2>
			<table>
				<tr>
					<td>
						Bife de chorizo
					</td>
					<td>
						2
					</td>
				</tr>
				<tr>
					<td>
						Coca-cola
					</td>
					<td>
						4
					</td>
				</tr>
				<tr>
					<td>
						Sorrentinos
					</td>
					<td>
						2
					</td>
				</tr>
			</table>
		</div>
		
		<div class="separator"></div>
		
		<div class="center">
			<input type="button" class="button" value="Confirmar Pedido" >
		</div>		
		
	</div>
<body>
<html>